/* Katia Moreira - Portfolio - created with LESS - LESS is MORE */

@blue: #2688c5;
@grey: #393939;
.oswald () {
  font-family: 'Oswald', Arial, sans-serif;
}
.background-img (@url) {
	background: url("/bundles/kaymoreyportfolio/images/@{url}");
}

/* ---- HEADER ---- */
header {
	background-color: @blue;
	height: 52px;
}
#header {
	margin-right: auto;
	margin-left: auto;
	width: 67%;
	#menu {
		.oswald;
		padding-top: 15px;
		li {
			.oswald;
			text-transform: uppercase;
			float: left;
			margin-right: 7%;
			a {
				.oswald;
				color: #FFF;
				&:hover {
					color: @grey;
				}
			}
		}
	}
	#social {
		position: absolute;
		left: 80%;
		top: 10px;
		a {
			width: 32px;
			height: 32px;
			display: block;
			float: left;
			margin-right: 10px;
		}
		.twitter {
			.background-img("social/twitter02_dark.png");
			&:hover {
				.background-img("social/twitter02_active.png");
			}
		}
		.linkedin {
			.background-img("social/in_dark.png");	
			&:hover {
				.background-img("social/in_active.png");
			}
		}
		.blog {
			.background-img("social/blog_dark.png");
			&:hover {
				.background-img("social/blog_active.png");
			}	
		}
	}
}

/* ---- CONTENT ---- */
#content {
	width: 100%;
	height: auto;
	margin: auto;
	position: relative;
}

/* ---- INDEX ---- */
#home {
	width: 70%;
	margin: auto;
	position: relative;
	.static {
		display: block;
	}
	.slider {
		display: none;
	}
	#logo {
		width: 35%;
		margin-top: 1.8%;
		margin-bottom: 1.8%;
		//margin-top: 25px;
		img {
			max-width: 100%;
		}
		#breakApartRounded {
			position: absolute;
			top: 0;
			background-image: url('/bundles/kaymoreyportfolio/images/slider/circle.png'), 
				url('/bundles/kaymoreyportfolio/images/slider/circle.png'), 
				url('/bundles/kaymoreyportfolio/images/slider/circle.png'), 
				url('/bundles/kaymoreyportfolio/images/slider/circle.png');
			background-repeat: no-repeat;
		 
			/*Transition*/
			-webkit-transition: all 1s ease;
			-moz-transition: all 1s ease;
			-o-transition: all 1s ease;
			-ms-transition: all 1s ease;
			transition: all 1s ease; 
		}
		.circle {
			height: 330px; 
			width: 330px;
			background: transparent;
			margin: 0 50px 50px 0;
		 
			/*Make it a circle*/
			-webkit-border-radius: 165px;
			-moz-border-radius: 165px;
			border-radius: 165px;
		}
	}
	#text {
		position: absolute;
		top: 90px;
		left: 370px;
		h1 {
			color: @blue;
			.oswald;
			font-size: 3.3125em; /* 53px / 16px */
			line-height: 64px;
		}
		h2 {
			color: @blue;
			.oswald;
			font-size: 1.75em; /* 28px / 16px */
		}
		.fb-like {
			margin-top: 3px;
			margin-bottom: 8px;
		}
		#paginator {
			margin-top: 5px;
			.page {
				width: 10px;
				height: 10px;
				margin-right: 3px;
				overflow: hidden;
				float: left;
				.background-img("slider/paginator.png");
				background-position: top left;
				cursor: pointer;
				&.active {
					background-position: bottom left;
				}
			}
		}
	}
}

/* ---- FOOTER ---- */
footer {
	clear: both;
	width: 100%;
	background-color: #e4e3e3;
	#footer {
		width: 70%;
		margin-right: auto;
		margin-left: auto;
		padding-top: 15px;
		padding-bottom: 5px;
		position: relative;
		#left {
			display: inline-block;
			vertical-align: top;
			width: 42%;
		}
		#profile {
			float: left;
		}
		#profile-text {
			font-family: Georgia, Arial, sans-serif;
			color: @grey;
			font-size: 0.8125em; /* 13px / 16px */
			padding-left: 95px;
			.blue {
				color: @blue;
			}
		}
		#twitter_update_list {
			width: 39%;
			display: inline-block;
			vertical-align: top;
			margin-left: 15%;
			font-family: Georgia, Arial, sans-serif;
			color: @grey;
			font-size: 0.8125em; /* 13px / 16px */			
			#head {
				margin-bottom: 12px;
				img {
					float: left;
					vertical-align: middle;
				}
				.twitter-follow-button {
					margin-top: 8px;
					margin-left: 8px;
				}
				a {
					margin-left: 8px;
					font-size: 1.230769230769231em; /* 16px / 13px */
					color: @blue;
				}
			}
			p {
				padding-top: 8px;
				padding-bottom: 10px;
				&.first {
					border-bottom: dotted @blue 1px;
				}
				a {
					font-size: 1em; /* 13px / 13px */
					color: @blue;
				}
			}
		}
	}
}
@media screen and (min-height: 610px) {
	footer {
		position: absolute;
		bottom: 0px;
		left: 0px;
	}
}
@media screen and (min-width: 1100px) {
	#home {
		#text {
			h1 {
				font-size: 4.0625em; /* 65px / 16px */
			}
			h2 {
				font-size: 2.1875em; /* 35px / 16px */
			}
		}
	}
}
@media screen and (min-width: 900px) {
	#home {
		.slider {
			display: block;
		}
		.static {
			display: none;
		}
		#logo {
			width: 330px;
		}
	}
}